<template>
  <div class="tab-bar">
    <van-tabbar v-model="currentIndex" active-color="#ff9854" route>
      <template v-for="(item, index) in tabBarData" :key="index">
        <van-tabbar-item :to="item.path">
          <span class="text">{{item.text}}</span>
          <template #icon="props">
            <img :src="getAssetURL(item.img)" alt="">
          </template>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script setup>
import tabBarData from "@/assets/data/tabBarData"
import {getAssetURL} from "@/utils"
import {ref, watch} from "vue"
import {useRouter, useRoute} from "vue-router"

const currentIndex = ref(0)
const router = useRouter()
const itemClick = (index, item) => {
  currentIndex.value = index
  router.push(item.path)
}

const route = useRoute()
// 监听路由变化，路由变化切换下方tabBar的展示图片，不过我这里没有实现图片切换功能
watch(route, (newRoute) => {
  const index = tabBarData.findIndex(item => item.path === newRoute.path)
  if(index === -1) return
  currentIndex.value = index
})

</script>

<style lang='less' scoped>
.tab-bar{
}
</style>